<template>
  <a-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :destroyOnClose="true"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-row type="flex" :gutter="16">
        <a-col :md="8" :sm="24" style="height: 500px; overflow-x: hidden; overflow-y: auto">
          <address-list-left v-model="currentOrgCode" @check="onChecked" />
        </a-col>
        <a-col :md="24 - 8" :sm="24" style="height: 500px; overflow-x: hidden; overflow-y: auto">
          <address-list-right v-model="currentOrgCode" :check-status="checkStatus" @onSelect="onSelect" />
        </a-col>
      </a-row>
    </a-spin>
  </a-modal>
</template>

<script>
import AddressListLeft from './modules/AddressListLeft'
import AddressListRight from './modules/AddressListRight'

export default {
  name: 'AddressList',
  components: { AddressListLeft, AddressListRight },
  data() {
    return {
      description: '通讯录页面',
      currentOrgCode: '',
      title: '查询条件',
      checkStatus: '0',
      reportIds: [],
      //
      visible: false,
      model: {},
      confirmLoading: false,
      url: {
        edit: '/investigateSasac/edit',
      },
    }
  },
  watch: {
    currentOrgCode: {
      immediate: true,
      handler(orgCode) {
        console.log(78787, orgCode)
      },
    },
  },
  methods: {
    edit() {
      this.checkStatus = '0'
      this.visible = true
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      this.$emit('ok', this.reportIds, this.currentOrgCode)
      this.visible = false
    },
    onChecked(val) {
      this.checkStatus = val
    },
    onSelect(val) {
      this.reportIds = val
    },
    handleCancel() {
      this.close()
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>